
<style>
    .select .placeholder {
    position: relative;
    display: block;
    background-color: #393d41;
    z-index: 1;
    padding: 1em;
    border-radius: 2px;
    cursor: pointer;
}
.select2-container {
    display: inline-block;
}
.select2-container .select2-selection--single {
    visibility: hidden;
}
.layui-select-title{
    display: none;
}
.select2{
    width: 300px;
}
.select2 select2-container select2-container--default select2-container--focus select2-container--below{
    width: 300px;
}
.select2 select2-container select2-container--default select2-container--focus{
    width: 300px;
}
    .select2-selection select2-selection--multiple{
    width: 100%;
}
.select2-selection__rendered{
    width: 100%;
}
.select2-search__field{
    width: 100%;
}
.selection{
    width: 100%;
}
.select2-container select {
    display: none;
}
.select .placeholder:hover {
    background: #34383c;
}
.select .placeholder:after {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
    content: '\f078';
    z-index: 10;
}
.select.is-open .placeholder:after {
    content: '\f077';
}
.select.is-open ul {
    display: block;
}
.select.select--white .placeholder {
    background: #fff;
    color: #999;
}
.select.select--white .placeholder:hover {
    background: #fafafa;
}
.select ul {
    display: none;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    z-index: 100;
}
.select ul li {
    display: block;
    text-align: left;
    padding: 0.8em 1em 0.8em 1em;
    color: #999;
    cursor: pointer;
}
.select ul li:hover {
    background: #4ebbf0;
    color: #fff;
}
.select2-container .select2-choice>.select2-chosen {
    text-align:center;
    color:#29f;
}

.select2-container--default .select2-selection--multiple {
    background: transparent;
    border: none;
    box-shadow: none;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, #7f5a83 0%, #0d324d 100%); 
    color: #ffffff;
    border: none;
    border-radius: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    margin-top: 5px;
    margin-right: 10px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}


.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
    margin-left: 5px;
    opacity: 0.8;
    transition: color 0.2s ease-in-out;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ff6a00;
}


.select2-selection__choice .select2-selection__choice__text {
    margin-left: 5px;
    font-weight: 500;
}


@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    animation: float 3s ease-in-out infinite;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    animation: float 4s ease-in-out infinite;
}

.select2-search--inline .select2-search__field {
  margin-top: 5px; 
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  animation: fadeIn 0.3s;
}
</style>
<link href="/ast/layui/css/layui.css" rel="stylesheet">
<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <input type="text" id="cardname" value="" lay-verify="required" placeholder="模板名称" lay-reqtext="name" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <input type="text" id="cardattack" value="" lay-verify="required" placeholder="模板简介" lay-reqtext="attack" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <input type="text" id="cardimg" value="" lay-verify="required" placeholder="模板简图(外部地址请以::开头)" lay-reqtext="attack" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
              </div>
              <div  id="geograyss" class="layui-form-item">
                <select class="form-control sci-fi" style="display: none;" id="web_site_dx" name="fsdx[]" multiple></select>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" id='button-add'  lay-submit lay-filter="addcard">Add</button>
              </div>
             
            </div>
          </div>
          <link href="/ast/js/select.css" rel="stylesheet" />
          <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/ast/js/select.js"></script>
          <script src="/ast/layui/layui.js"></script>
          
<script>
layui.use('form', function(){
  var form = layui.form;
  var layer = layui.layer;
  form.render();
  return false;
});

$('#web_site_dx').select2({
        placeholder: "输入试卷ID或名称...确定",
        allowClear: true,
        multiple: true, 
        
        ajax: {
            url: '/plugin/others/call/ssearch.php',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (data) {
                var results = [];
                results = results.concat($.map(data.results, function (item) {
                    return {
                        id: item.exmatid, 
                        text: item.exmatname 
                    };
                }));
                return {
                    results: results
                };
            },
            cache: true
        },
        templateResult: function (data) {
            return data.text || '全体用户';
        },
        templateSelection: function (data) {
            return data.text || '全体用户';
        }
        
    });
    function blallchangewidth(){
        var bdiv = document.getElementById('geograyss');
        for(var i = 0;i < bdiv.children.length;i++){
            bdiv.children[i].style.width = '100%';
        }
    }
    blallchangewidth();
function fetchcardadd(){
    const card_name = document.getElementById('cardname').value;
    const card_attack = document.getElementById('cardattack').value;
    const card_url = $('#web_site_dx').val();
    const card_img = document.getElementById('cardimg').value;
    if(card_url.length >1){
        layer.msg('请选择一个试卷', {icon: 5});
        return false;
    }
    if(card_name === '' || card_attack === '' || card_url.length < 1 ){
        layer.msg('请填写完整信息', {icon: 5});
        return false;
    }
    var loadingz = layer.load(2);
    fetch('../call/newjsonb.php?name='+card_name+'&jj='+card_attack+'&gs='+card_url+'&img='+card_img)
    .then(response => response.json())
    .then(data => {
        layer.close(loadingz);
        if(data.code === 1){
            layer.msg(data.msg, {icon: 6});
        }else{
            layer.msg('添加失败'+data.msg, {icon: 5});
        }
        setTimeout(function(){
            window.location.reload();
        }, 1000);
    })
}
document.getElementById('button-add').addEventListener('click', fetchcardadd)
</script>